<template>
  <div class="echartsWeb">
    <div class="echarts" id="barometer-pie"></div>
  </div>
</template>
  
  <script>
import echarts from "@/utils/lib/echarts";
import { PieChart } from "echarts/charts";
echarts.use([PieChart]);
export default {
  props: {
    piedata: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      chart: null,
    };
  },
  mounted() {
    // this.pieChart();
  },
  watch: {
    piedata: {
      handler(val) {
        if (val) {
          this.chartDes();
          this.pieChart();
        }
      },
      deep: true,
      immediate: false,
    },
  },
  beforeDestroy() {
    this.chartDes();
  },
  methods: {
    chartDes() {
      if (!this.chart) {
        return;
      }
      this.chart.dispose();
      this.chart = null;
    },
    pieChart() {
      let options = {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 20, // 字体大小
          },
        },
        legend: [
          {
            // data: [
            //   "立春",
            //   "雨水",
            //   "惊蛰",
            //   "春分",
            //   "清明",
            //   "谷雨",
            //   "立夏",
            //   "小满",
            //   "芒种",
            //   "夏至",
            //   "小暑",
            //   "大暑",
            // ],
            data: this.piedata.legenddata[0],
            formatter: ["{a|{name}}"].join("\n"),
            orient: "vertical",
            itemHeight: 16,
            itemWidth: 16,
            itemGap: 10,
            top: "10%",
            right: "0%",
            padding: 0,
            // y: '10%',
            // x: 'right',
            // right: '1%',
            textStyle: {
              color: "#30AAFF",
              // color: "red",
              // fontFamily: "PingFang-SC-Regular, PingFang-SC",
              lineHeight: 20,
              // align: 'right',
              rich: {
                a: {
                  width: 100,
                  fontSize: 12,
                },
              },
            },
          },
          {
            // data: [
            //   "立秋",
            //   "处暑",
            //   "白露",
            //   "秋分",
            //   "寒露",
            //   "霜降",
            //   "立冬",
            //   "小雪",
            //   "大雪",
            //   "冬至",
            //   "小寒",
            //   "大寒",
            // ],
            data: this.piedata.legenddata[1],
            formatter: ["{a|{name}}"].join("\n"),
            orient: "vertical",
            itemHeight: 16,
            itemWidth: 16,
            itemGap: 10,
            top: "10%",
            padding: 0,
            right: "10%",
            // y: '10%',
            // x: 'right',
            // right: '1%',
            textStyle: {
              color: "#30AAFF",
              // fontFamily: "PingFang-SC-Regular, PingFang-SC",
              lineHeight: 20,
              // align: 'right',
              rich: {
                a: {
                  width: 100,
                  fontSize: 12,
                },
              },
            },
          },
          {
            // data: [
            //   "立秋",
            //   "处暑",
            //   "白露",
            //   "秋分",
            //   "寒露",
            //   "霜降",
            //   "立冬",
            //   "小雪",
            //   "大雪",
            //   "冬至",
            //   "小寒",
            //   "大寒",
            // ],
            data: this.piedata.legenddata[2],
            formatter: ["{a|{name}}"].join("\n"),
            orient: "vertical",
            itemHeight: 16,
            itemWidth: 16,
            itemGap: 10,
            top: "10%",
            padding: 0,
            right: "20%",
            // y: '10%',
            // x: 'right',
            // right: '1%',
            textStyle: {
              color: "#30AAFF",
              // fontFamily: "PingFang-SC-Regular, PingFang-SC",
              lineHeight: 20,
              // align: 'right',
              rich: {
                a: {
                  width: 100,
                  fontSize: 12,
                },
              },
            },
          },
        ],
        color: [
          "#019881",
          "#04CDAE",
          "#72E6D4",
          "#72E6AD",
          "#00CC67",
          "#2E9500",
          "#509E00",
          "#74E600",
          "#9CE600",
          "#DAE600",
          "#E5BD34",
          "#E6A801",
          "#E69100",
          "#E68500",
          "#E66700",
          "#E690B1",
          "#CBC1E6",
          "#7D8FE6",
          "#506AE6",
          "#2D82E6",
          "#299FE6",
          "#5EB2E6",
          "#8DC2E5",
          "#B8DAE5",
        ],
        series: [
          {
            name: "年配额节气分布比例",
            type: "pie",
            radius: ["0%", "80%"],
            center: ["40%", "50%"],
            avoidLabelOverlap: false,
            left: "-20%",
            label: {
              show: false,
              position: "center",
              color: "#1890FF",
              formatter: function (params) {
                return params.value; // 中间显示数据
              },
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: this.piedata.seriesdata,
            // data: [
            //   { value: 248, name: "立春" },
            //   { value: 735, name: "雨水" },
            //   { value: 580, name: "惊蛰" },
            //   { value: 484, name: "春分" },
            //   { value: 300, name: "清明" },
            //   { value: 800, name: "谷雨" },
            //   { value: 648, name: "立夏" },
            //   { value: 225, name: "小满" },
            //   { value: 120, name: "芒种" },
            //   { value: 280, name: "夏至" },
            //   { value: 320, name: "小暑" },
            //   { value: 450, name: "大暑" },
            //   { value: 888, name: "立秋" },
            //   { value: 735, name: "处暑" },
            //   { value: 120, name: "白露" },
            //   { value: 250, name: "秋分" },
            //   { value: 100, name: "寒露" },
            //   { value: 120, name: "霜降" },
            //   { value: 280, name: "立冬" },
            //   { value: 370, name: "小雪" },
            //   { value: 200, name: "大雪" },
            //   { value: 180, name: "冬至" },
            //   { value: 470, name: "小寒" },
            //   { value: 150, name: "大寒" },
            // ],
          },
        ],
      };
      this.initChart("barometer-pie", options);
    },
    initChart(id, options) {
      this.chart = echarts.init(document.getElementById(id));
      this.chart.setOption(options);
      window.addEventListener("resize", () => {
        if (this.chart) {
          this.chart.resize();
        }
      });
    },
  },
};
</script>
  <style scoped lang="scss">
.echartsWeb {
  width: 100%;
  height: 300px;
  //   width: 679px;
  //   height: 195px;
  //   padding-left: 39px;
  //   box-sizing: border-box;
  //   position: relative;
  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>